<template>
	<view class="content">
		<image class="topImg" :src="markingData.pic"></image>
		<view class="title">
			<view class="name">{{markingData.name}}</view>
			<view class="price">{{markingData.priceScore}}彩豆</view>
		</view>
		<view class="note">
			{{markingData.note}}
		</view>
		<view class="lineDetial">- 详情 -</view>
		<view class="list">
			<view class="item" v-for="(item, index) in markingData.detailList" :key="index">
				<image mode="widthFix" class="detailImg response" :src="item"></image>
			</view>
		</view>
		<view class="notDetail" v-if="markingData.detailList.length == 0">暂无详情...</view>
		<view class="exchangeBtn" @click="toExchange">兑 换</view>
		<image class="return" src="../../static/img/marking/fanhui.png" @click="doReturn"></image>
		
		<!-- 收货地址选择 -->
		<uni-popup ref="popupAddress" type="center" class="popupAddress">
			<view class="popupAddress-v">
				<view class="selectAdd">选择收货地址</view>
				<scroll-view class="itemBox" :scroll-y="true">
					<view class="item-addr" v-for="(item, index) in addressList" :key="index" @click="selectAddresss(index)">
						<image class="select" src="../../static/img/marking/select_add.png" v-show="isSelect == index"></image>
						<view class="txt">
							<text class="name">【{{ item.receiver }}】</text>
							<text>{{ item.tel }}</text>
							<text class="def" v-show="item.isDefault == 1">(默认)</text>
						</view>
						<view class="txt">{{ item.address }}</view>
					</view>
				</scroll-view>
		
				<view class="btn-v">
					<view class="toUpdate" @click="toUpdateAdd">修改地址</view>
					<view class="toPick" @click="submitMarking">确定兑换</view>
				</view>
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	
	export default{
		data(){
			return{
				addressList:[
					
				],
				isSelect: 0,
				addressId:'',
				index:0,
				markingData:{
					  id:'',
					 pic:'',
					 detailList:[],
					 name:'',
					 isPost:0,
					 note:'',
					 priceScore: 0
				}
			}
		},methods:{
			selectAddresss(index) {
				this.isSelect = index;
				this.addressId = this.addressList[index].id;
			},
			toUpdateAdd(){
				this.$refs.popupAddress.close();
				uni.navigateTo({
					url: '../my/tool/address/index'
				});
			},
			submitMarking(){
				this.doExchange(this.index);
			},
			toExchange() { //兑换
				this.isSelect = 0;//初始化选择
				this.addressId = '';//初始化地址
				if (this.isToPost()) { //需要邮寄
					this.addressList=[];//初始化
					let opts = {
						url: 'myUserAddress/list',
						method: 'get'
					};
					let param = {};
					this.tokenRequest(opts, param).then(res => {
						uni.hideLoading();
						let rData = res.data;
						if (rData.length == 0) {
							uni.showModal({
								title: '提示',
								showCancel: false,
								confirmText: '去设置',
								content: '未设置收货地址',
								success: function(res) {
									uni.navigateTo({
										url: '../my/tool/address/index'
									});
								}
							});
							return;
						}
						this.$refs.popupAddress.open();
						this.addressList = rData;
						this.addressId = this.addressList[0].id;//默认第一个
					}, error => {})
					
				} else {//无需邮寄
					this.doExchange();
				}
			},
			doExchange(){
				let that = this;
				uni.showModal({
					title: '兑换确认',
					content: '兑换该福利消耗彩豆:' + that.markingData.priceScore,
					success: function(res) {
						if (res.confirm) {
							let opts = {
								url: 'marking/exchangeMarking',
								method: 'post'
							};
							let param = {
								markingId:that.markingData.id,
								addressId:that.addressId
							};
							that.tokenRequest(opts, param).then(res => {
								uni.hideLoading();
								let rMsg = res.msg;
								uni.showToast({
									title: rMsg,
									mask: true,
									icon: 'none',
									duration: 2000
								})
								//兑换成功到兑换详情
								uni.navigateTo({
									url: '../my/tool/awardDetail'
								});
								
								that.$refs.popupAddress.close();
							}, error => {
							})
						} else if (res.cancel) {
							that.$refs.popupAddress.close();
							uni.showToast({
								title: '您取消了兑换',
								mask: true,
								icon: 'none',
								duration: 2000
							})
						}
					}
				})
			},
			isToPost() { //是否需要邮寄
				if (this.markingData.isPost == 0) {
					return false;
				} else {
					return true;
				}
			},
			doReturn(){//返回
				uni.navigateBack({
				    delta: 1
				});
			},
			getInitData(id){
				let opts = {
					url: 'marking/getMarkingById/'+id,
					method: 'get'
				};
				let param = {};
				this.tokenRequest(opts, param).then(res => {
					uni.hideLoading();
					let rData = res.data;
					this.markingData = rData;
					this.markingData.detailList = [];
					if(rData.detailPic.length>0){
						this.markingData.detailList = rData.detailPic.split(',');
					}
				}, error => {})
			}
		},onLoad(options) {
			this.markingData.id = options.id;
		},onShow() {
			this.getInitData(this.markingData.id);
		}
	}
	
</script>

<style>
	image{
		display: block;
	}
	.list{
		margin-bottom: 50rpx !important;
	}
	.topImg{
		width: 750rpx;
		height: 750rpx;
	}
	.title{
		margin: 20rpx;
		background-color: #fff;
		padding: 15rpx;
		color: #333;
		border-radius: 15rpx;
	}
	.title .price{
		font-size: 36rpx;
		color: #e98f36;
		margin-top: 15rpx;
		text-align: right;
		font-weight: 800;
	}
	.title .name{
		font-size: 32rpx;
	}
	.lineDetial{
		text-align: center;
		margin: 30rpx;
		color: #555555;
	}
	.exchangeBtn{
		position: fixed;
		bottom: 0;
		background-color: #e98f36;
		color: #fff;
		font-weight: 800;
		font-size: 35rpx;
		width: 100%;
		height: 50rpx;
		text-align: center;
		padding: 20rpx;
	}

	.return{
		position: fixed;
		top: 100rpx;
		left: 30rpx;
		width: 70rpx;
		height: 70rpx;
		
	}
	.notDetail{
		text-align: center;
		font-size: 28rpx;
	}
	.note{
		background-color: #fff;
		padding: 20rpx;
		margin: 10rpx 0;
		font-size: 30rpx;
		color: #e98f36;
	}
	
	
	
	/**
	 * 收货地址
	 */
	.popupAddress-v .btn-v {
		padding-top: 30upx;
	}
	.itemBox {
		height: 650rpx;
	}
	.toPick,
	.toUpdate {
		display: inline;
		border-radius: 10upx;
		padding: 15upx;
		color: #fff;
		background-color: #e98f36;
	}
	.toUpdate {
		margin-right: 20upx;
	}
	.toPick {
		margin-left: 20upx;
	}
	.popupAddress-v .name {
		font-weight: 800;
	}
	.popupAddress-v {
		width: 500upx;
		font-size: 30rpx;
		background-color: #fff;
		padding: 30upx;
		text-align: center;
		border-radius: 20upx;
	}
	.popupAddress-v image {
		position: absolute;
		left: 10upx;
		top: 10upx;
		width: 40upx;
		height: 40upx;
	}
	.selectAdd {
		margin-bottom: 20upx;
		font-weight: 800;
		font-size: 32upx;
	}
	.popupAddress-v .item-addr {
		border: 2upx solid #c0c0c0;
		margin-bottom: 15upx;
		border-radius: 10upx;
		position: relative;
	}
	.popupAddress-v .txt {
		margin: 10upx;
	}
	
</style>
